@extends('layouts.app')

@section('title', '发布卡券')

@section('css-import')
<style type="text/css">
.form-input-control{
	margin-bottom: 20px;
}
.loadCardBackground,.loadCouponBackground{
	width: 350px;
	display: block;
	margin:15px;
}
#l-map{height:300px;width:100%;}
#r-result{width:100%;}
</style>
@endsection

@section('content-fluid')

<h3 class="page-title">发布卡券</h3>
<form action="/coupon/do/release" method="post" enctype="multipart/form-data" id="addCouponForm">
	<div class="row">
		<div class="col-md-6">
			<label class="control-label">标题名称</label>
			<input type="text" name="coupon_name" value="" class="form-control form-input-control" AUTOCOMPLETE="off" placeholder="请填写标题名称" alt="标题名称">
			<!-- <div class="limitdaynum hide"> -->
			<label class="control-label">售价</label>
			<input type="text" name="price" AUTOCOMPLETE="off" value="" class="form-control limit_days form-input-control" alt="价格" placeholder="填写卡券价格">

			<label class="control-label">成本价格</label>
			<input type="text" name="cost_price" AUTOCOMPLETE="off" value="" class="form-control limit_days form-input-control" alt="成本价格" placeholder="填写卡券成本价格">

			<label class="control-label">定位地址</label>
			<div id="l-map"></div>
			<input type="text" id="suggestId" name="address" AUTOCOMPLETE="off" value="" class="form-control limit_days form-input-control" alt="详细地址" placeholder="详细地址">
			<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
			
			<label class="control-label">优惠开始时间</label>
			<input type="date" name="starttime" class="form-control form-input-control" alt="开始可用时间">
			
			<label class="control-label">优惠结束时间</label>
			<input type="date" name="stoptime" class="form-control form-input-control" alt="结束可用时间">
			
			<label class="control-label">发布数量</label>
			<input type="number" name="num" value="1" class="form-control limit_days form-input-control" alt="发布数量"  placeholder="发布数量">

			<label class="control-label">是否邮寄</label>
			<select class="form-control" name="is_mail">
				<option value="0">不邮寄</option>
				<option value="1">需要邮寄</option>
			</select>
			<br>
			<label class="control-label">购卡优惠</label>
			<select class="form-control" name="benefit">
				<option value="-1">没有优惠</option>
				<option value="0">购任意卡优惠</option>
				<option value="1">198套餐优惠</option>
				<option value="2">398套餐优惠</option>
			</select>
			<br>

			<label class="control-label">优惠后价格</label>
			<input type="text" name="benefit_price" AUTOCOMPLETE="off" value="0" class="form-control limit_days form-input-control" alt="优惠后价格" placeholder="优惠后价格">

			<label class="control-label">活动介绍</label>
			<div id="div3" placeholder="描述一下饭卡使用规则" alt="饭卡使用规则"></div>
			<input type="hidden" name="desc" id="desc">

			<label class="control-label">封面图片</label>
			<img src="" class="loadCouponBackground">
			<input type="file" name="centerBackground" class="form-input-control" alt="主题图">

			<label class="control-label">店铺</label>
			<input type="text" name="shop_name" AUTOCOMPLETE="off" value="" class="form-control limit_days form-input-control" alt="搜索店铺" placeholder="搜索店铺">

			
			<input type="hidden" name="lng" value="">
			<input type="hidden" name="lat" value="">
			<input type="hidden" name="province" value="">
			<input type="hidden" name="city" value="">

			<input type="submit"  class="btn btn-primary btn-toastr center-block" value="发 布">
		</div>
	</div>
</form>
@endsection

@section('js-import')
<script type="text/javascript" src="https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=vQBEj1uCOLD3MPMwoxrICDUhz7vhyR0e"></script>
<script type="text/javascript" src="{{config('app.inlet_src')}}/a/js/design.js"></script>
@endsection

@section('js-write')
<script type="text/javascript">
	// 百度地图API功能
	function G(id) {
		return document.getElementById(id);
	}

	var map = new BMap.Map("l-map");
	map.addControl(new BMap.NavigationControl());
	map.centerAndZoom("石家庄",12);                   // 初始化地图,设置城市和地图级别。

	var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});
	

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			var gc = new BMap.Geocoder();
            var pointAdd = new BMap.Point(pp.lng, pp.lat);
            gc.getLocation(pointAdd, function(rs){
                //或者其他信息
                $('input[name="province"]').val(rs.addressComponents.province);
                $('input[name="city"]').val(rs.addressComponents.city);
            })
			setlnglat(pp.lng,pp.lat)
			map.centerAndZoom(pp, 18);
			var marker = new BMap.Marker(pp)
			marker.enableDragging();    
			marker.addEventListener("dragend", function(e){    
			    setlnglat(e.point.lng,e.point.lat);
			})
			map.addOverlay(marker);    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}

	function setlnglat(lng,lat){
		$('input[name="lng"]').val(lng);
		$('input[name="lat"]').val(lat);
	}

	var E = window.wangEditor
	var editor = new E('#div3')
	editor.customConfig.uploadImgServer = '/coupon/upload'  // 上传图片到服务器
	editor.customConfig.uploadImgHeaders = {
	    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
	};
	editor.customConfig.uploadFileName = 'images';
	var $text1 = $('#desc');
	editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }
    // 自定义菜单配置
    editor.customConfig.menus = [
        'head',  // 标题
	    'underline',  // 下划线
	    'strikeThrough',  // 删除线
	    'foreColor',  // 文字颜色
	    'backColor',  // 背景颜色
	    'link',  // 插入链接
	    'list',  // 列表
	    'justify',  // 对齐方式
	    'emoticon',  // 表情
	    'image',  // 插入图片
	    'video',  // 插入视频
	    'undo',  // 撤销
	    'redo'  // 重复
    ]
	editor.create()
	loadShow('centerBackground','loadCouponBackground');
	function loadShow(namestr,showstr){
		$('input[type=file][name='+namestr+']').change(function(e){
			var files = e.target.files;
			var v = $(this).val();
			var reader = new window.FileReader();
			reader.readAsDataURL(files[0]);
			//异步加载文件成功
		    reader.onload = function(e){
		       // reader.result 表示图片地址
		       $('.'+showstr).attr('src',reader.result);
		    }
		});
	}
	
	$('.groupnum').bind('input propertychange',function(){
		var num198 = Number($('input[name="num_198"]').val());
		var num258 = Number($('input[name="num_258"]').val());
		var num298 = Number($('input[name="num_298"]').val());
		$('input[name="frequency"]').val(num198+num258+num298);
	});
	
	$('input[type=radio][name=business_type]').change(function(){
		var value = $(this).val();
		$('input[name="frequency"]').val('');
		if(value=='XS'){
			$('.limitdaynum').removeClass('hide');
			$('.groupcard').hasClass('hide')?'':$('.groupcard').addClass('hide');
		}else if(value=='ZH'){
			$('.groupcard').removeClass('hide');
			$('.limitdaynum').hasClass('hide')?'':$('.limitdaynum').addClass('hide');
		}else{
			$('.limitdaynum').hasClass('hide')?'':$('.limitdaynum').addClass('hide');
			$('.groupcard').hasClass('hide')?'':$('.groupcard').addClass('hide');
		}
	});
</script>
@endsection